<!--
 * @Descripttion: 
 * @version: 
 * @Author: wtzhang
 * @Date: 2021-09-01 14:18:34
 * @LastEditors: wtzhang
 * @LastEditTime: 2021-09-02 15:23:17
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="demo"></div>
  <script>
    let arr = [1, 2, 3, 4, 5, 6]
    // ----------------------------------------- forEach() 方法为每个数组元素调用一次函数（回调函数） ------------------------------------------
    /*
      注释：该函数接受 3 个参数：
            项目值
            项目索引
            数组本身
    */
    var txt = "";
    var numbers = [45, 4, 9, 16, 25];
    numbers.forEach(myFunction);

    function myFunction(value, index, array) {
      txt = txt + value + "<br>";
    }
    document.getElementById('demo').innerHTML = txt

    // -------------------------------------------- Array.map() ------------------------------------------------------------
    /*
      map() 方法通过对每个数组元素执行函数来创建新数组。
      map() 方法不会对没有值的数组元素执行函数。
      map() 方法不会更改原始数组。
    */
    //  实例1：将数组每个元素 * 2
    let mapArrX2 = arr.map(item => {
      return item * 2
    })
    console.log(mapArrX2);
    console.log(arr); // 不会改变原数组
    /*
      请注意，该函数有 3 个参数：
      项目值
      项目索引
      数组本身
      当回调函数仅使用 value 参数时，可以省略索引和数组参数
    */

    // -------------------------------------------- Array.filter() ------------------------------------------------------
    // filter() 方法创建一个包含通过测试的数组元素的新数组
    let filterArr = arr.filter(item => {
      return item > 3
    })
    console.log(filterArr); // [4, 5, 6]
    console.log(arr); // 不会改变原数组

    /*
      请注意此函数接受 3 个参数：
      项目值
      项目索引
      数组本身
      在上面的例子中，回调函数不使用 index 和 array 参数，因此可以省略它们：
    */

    // -------------------------------------------- Array.reduce() ------------------------------------------------------
    /*
      reduce() 方法在每个数组元素上运行函数，以生成（减少它）单个值。
      reduce() 方法在数组中从左到右工作。另请参阅 reduceRight()。
      reduce() 方法不会减少原始数组。
    */
    /*
      请注意此函数接受 4 个参数：
        - 总数（初始值/先前返回的值）
        - 项目值
        - 项目索引
        - 数组本身
    */
    let reduceArrTotal = arr.reduce((total, value) => {
      return total + value
    })
    console.log(reduceArrTotal);

    var numbers1 = [45, 4, 9, 16, 25]; // total=99
    var sum = numbers1.reduce(myFunction, 100);

    function myFunction(total, value) {
      return total + value;
    }
    console.log(sum); // 199

    let initArr = numbers1.reduce((total, value) => {
      return total + value
    }, 100)
    console.log(initArr); // 199

    // ----------------------------------------------- Array.reduceRight() -------------------------------------------------
    /*
      reduceRight() 方法在每个数组元素上运行函数，以生成（减少它）单个值。
      reduceRight() 方法在数组中从右到左工作。另请参阅 reduce()。
      reduceRight() 方法不会减少原始数组
    */
    /*
      请注意此函数接受 4 个参数：
      总数（初始值/先前返回的值）
      项目值
      项目索引
      数组本身
    */
    var numbers1 = [45, 4, 9, 16, 25];
    var sum1 = numbers1.reduceRight(myFunction);

    function myFunction(total, value) {
      return total + value;
    }
    console.log(sum1); // 99

    // ------------------------------------------------ Array.every() -----------------------------------------------------
    /**
     * every() 方法检查所有数组值是否通过测试。
    */
    let everyArr = arr.every(item => {
      return item > 5
    })
    console.log(everyArr); // false
    /**
      请注意此函数接受 3 个参数：
        - 项目值
        - 项目索引
        - 数组本身
    */

    // ------------------------------------------------ Array.some() -----------------------------------------------------
    /*
      some() 方法检查某些数组值是否通过了测试
    */
    let someArr = arr.some((value, index, array) => {
      return value > 5
    })
    console.log(someArr); // true

    /*
      请注意此函数接受 3 个参数：
        - 项目值
        - 项目索引
        - 数组本身
    */

    // ------------------------------------------------ Array.indexOf() -------------------------------------------------
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    /*
      indexOf() 方法在数组中搜索元素值并返回其位置。
        - 注释：第一个项目的位置是 0，第二个项目的位置是 1，以此类推
    */
    let indexOfFruits = fruits.indexOf('Apple')
    console.log(indexOfFruits); // 2
    /*
      array.indexOf(item, start)
        - item	必需。要检索的项目。
        - start	可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到结尾。
    */
    console.log(fruits.indexOf('柠檬')); // -1
    // 如果未找到项目，Array.indexOf() 返回 -1
    // 如果项目多次出现，则返回第一次出现的位置。

    // ------------------------------------------------ Array.find() -------------------------------------------------------
    /*
      find() 方法返回通过测试函数的第一个数组元素的值
      找不到 undefined
    */
    let findFruits = fruits.find((value, index, array) => {
      return value === 'Apple'
    })
    console.log(findFruits); // Apple

    var findData = [1, 2, 3, 2, 2]
    let findArr = findData.find(value => {
      return value > 1
    })
    console.log(findArr); // 2
    /*
      请注意此函数接受 3 个参数：
        - 项目值
        - 项目索引
        - 数组本身
    */

    // ------------------------------------------------- Array.findIndex() ------------------------------------------------
    // findIndex() 方法返回通过测试函数的第一个数组元素的索引
    fruits.splice(0, 0, '柠檬')
    let findIndexArr = fruits.findIndex((value, index, array) => {
      return value === '柠檬'
    })
    console.log(fruits);
    console.log(findIndexArr); // 0
    /*
      请注意此函数接受 3 个参数：
        - 项目值
        - 项目索引
        - 数组本身
    */

    // -------------------------------------------------- Array.from() ----------------------------------------------------
    // Array.from方法用于将两类对象转为真正的数组：
    // 类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。
    let arrayLike = {
      '0': 'a',
      '1': 'b',
      '2': 'c',
      length: 3
    };
    // ES5的写法
    var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
    // ES6的写法
    let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']


    // ------------------------------------------------ Array.of()方法用于将一组值，转换为数组 ---------------------------------
    console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4]
    let obj = {
      1: 'jack',
      2: 'rose',
      3: 'jasper'
    }
    let person = Object.values(obj)
    console.log(person);
    function getValue(key) {
      return key in obj ? obj[key] : null
    }
    let person1 = getValue(1)
    console.log(person1);

    // ------------------------------------------------ Array.fill() ------------------------------------------------------
    /*
      fill方法使用给定值，填充一个数组。
    */
    let group = ['Jack', '战三', 'rose']
    let fillG = group.fill(7)
    console.log(fillG);[7, 7, 7]
    /*fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。*/
    group = ['Jack', '战三', 'rose']
    let fillG1 = group.fill(7, 1, 2)
    console.log(fillG1); // ["Jack", 7, "rose"]

    // ------------------------------------------------ Array.entries() ---------------------------------------------------
    for(let index of group.keys()) {
      console.log(index);
    }
    for(let item of group.values()) {
      console.log(item);
    }
    console.log('***********************************');
    for(let [item, index] of group.entries()) {
      console.log(item, index);
    }
    /*
      ES6 提供三个新的方法——entries()，keys()和values()——用于遍历数组。
      它们都返回一个遍历器对象（详见《Iterator》一章），可以用for...of循环进行遍历，
      唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。
    */


    // ------------------------------------------------ 数组实例的 includes() ----------------------------------------------
    /*
      Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似
    */
    let currArr = ['Jack', 'rose']
    let cuRes = currArr.includes('Jack')
    console.log(cuRes); // true
    /*
      该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置
    */
    // let cuRes1 = currArr.includes('Jack', 0) // true
    // let cuRes1 = currArr.includes('Jack', 1) // false
    let cuRes1 = currArr.includes('rose', -1) // true
    console.log(cuRes1);
    // 判断语句中的使用
    let flag = 1 || 2 || 3
    if (flag === 1 || flag === 2 || flag === 3) {
      console.log('满足条件');
    }
    if ([1, 2, 3].includes(flag)) {
      console.log('满足条件');
    }

    // ------------------------------------------------ Array.prototype.flat() ---------------------------------------------------
    /*
      用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响
    */
    let complexArr = [1, [2, 3], 4]
    let simpleArr = complexArr.flat()
    console.log(simpleArr); // [1, 2, 3, 4]

    // ------------------------------------------------ flatMap() -----------------------------------------------------------------
    
    
  </script>
</body>

</html>